import { onMounted } from 'vue';
import { ref } from 'vue';
import { computed } from 'vue';
import { reactive } from 'vue';

export default function useContent() {

    const chartInfoList = ref([
        {
            time: '昨天 12:00:00',
            oneself: true,
            avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
            accountName: 'wangzai',
            message: '收到',
            type: 'message'
        },
        {
            oneself: false,
            avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
            accountName: '康哥🫡',
            message:
                '1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
            time: '12:00:00',
            type: 'message'
        },
        {
            oneself: true,
            avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
            accountName: '康哥🫡',
            message:
                '222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
            time: '12:00:00',
            type: 'message'
        },
        {
            oneself: true,
            avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
            accountName: '康哥🫡',
            time: '12:00:00',
            type: 'image',
            imageUrl: 'http://t14.baidu.com/it/u=993204515,2486530630&fm=224&app=112&f=JPEG?w=500&h=500'
        },
        {
            oneself: true,
            avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
            accountName: '康哥🫡',
            time: '12:00:00',
            type: 'image',
            imageUrl: 'http://t15.baidu.com/it/u=89099288,852454427&fm=224&app=112&f=JPEG?w=500&h=500'
        },
        {
            oneself: true,
            avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
            accountName: '康哥🫡',
            time: '12:00:00',
            type: 'image',
            imageUrl: 'https://img95.699pic.com/xsj/0t/up/v3.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'
        },

        {
            oneself: false,
            avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
            accountName: '康哥🫡',
            message:
                '背景图,拿走不谢 纯白色背景图,拿走不谢6262阅读 1 23 发表评论 发表 评论列表(1条) 鹿茸604 ? 08-28 17:13 福建 回复 赞 没有更多啦 作者最近动态',
            time: '12:00:00',
            type: 'message'
        },
        {
            oneself: true,
            avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
            accountName: '康哥🫡',
            message:
                '777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777',
            time: '12:00:00',
            type: 'message'
        }
    ]);



    const imageList = reactive({
        src: computed(() => chartInfoList.value.filter((item) => item.type === 'image').map((item) => item.imageUrl)),
        currentIndex: 0,
        show: false
    });

    const onShowImagePreview = (url: string) => {
        imageList.currentIndex = imageList.src.findIndex((item) => item === url);
        imageList.show = true;
    };
    const onChangeImagePreview = (newIndex: number) => (imageList.currentIndex = newIndex);



    return {
        chartInfoList,
        imageList,
        onChangeImagePreview,
        onShowImagePreview
    }
}